<template>
	<div class="recommend">
		<div class="recommend-item" v-for="item in recommend.slice(0,4)" :key="item">
			<a href="" @click.prevent="itemDetail(item.id)"><img class="recommend-item-img" v-lazy="item.cover_url"
			                                                     :alt="item.description">{{ item.title }}</a>
		</div>
	
	</div>
</template>
<!--推荐数据组件-->
<script>
import {useRouter} from "vue-router"

export default {
	name: "Recommend",
	props: {
		recommend: {
			type: Array,
			default() {
				return []
			},
			
		}
	},
	setup(props) {
		
		const router = useRouter() // 路由
		
		// 单击商品跳转到详情页
		const itemDetail = (id) => {
			router.push({path: '/detail', query: {id}}) // 根据商品id查询商品详情
		}
		return {
			itemDetail,
			
		}
	}
}
</script>

<style scoped>
.recommend {
	display: flex;
	/*width: 100%;*/
	/*padding: 10px;*/
	border-bottom: 8px solid black;
	font-size: 14px;
	padding: 4px;
}

.recommend-item {
	flex: content;
	width: 100%;
}

.recommend-item-img {
	height: 80px;
	
}

a {
	text-decoration: none;
	
	
}
</style>